<template>
  <Nav>
    {{ $t('token.take_log') }}
  </Nav>
  <div class="page-token-take-log">
    <div class="content">
      <template v-for="item in data.list">
        <div class="box" :class="item.status == 'wait' ? 'animate__headShake animate__animated animate__infinite' : ''" @click="action(item)">
          <div class="name wrap"><b>HWD</b> {{ item.num }}</div>
          <div class="status" :class="item.status">
            {{ $t('token.take_status.' + item.status) }}
          </div>
          <div class="time">
            {{ $timeFormat(item.created_at) }}
          </div>
        </div>
      </template>
      <div class="page">
        <md-activity-indicator v-if="data.loading" type="carousel" color="#5d62a7" :size="15"></md-activity-indicator>
      </div>
      <div class="box" v-if="!data.loading && data.list.length == 0">
        <span>{{ $t('page.empty') }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { toast } from '@/style'
import { t } from '@/lang'
import { withdrawalLog } from '@/api/user'
import { take } from '@/web3/contracts/lp';
import Nav from '@/components/nav.vue'

const data = ref({
  list: [],
  loading: true
})

const get = () => {
  data.value.loading = true
  withdrawalLog('out', 'wait').then(res => {
    data.value.list.push(...res.data)
  }).finally(() => {
    data.value.loading = false
  })
}

get()

const action = data => {
  if(data.status != 'wait') return
  take(data.trade_token).then(() => {
    data.status = 'success'
  }).catch(() => {
    toast(t('token.error'))
  })
}
</script>

<style lang="scss" scoped>
  .page-token-take-log{
    min-height: 100%;
    background: url('@/assets/page.jpg') center center no-repeat;
    background-size: cover;
    background-attachment:fixed;

    .content{
      padding: 130px 30px 0;
    }

    .page{
      padding: 20px;
      display: flex;
      align-items: center;
      flex-direction: column;

      .md-button.link{
        color: #5d62a7;
      }
    }

    .box{
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 10px;
      background-image: linear-gradient(to left, #1f235e, #1d0f5e);
      overflow: hidden;
      position: relative;

      span{
        color: #5d62a7;
        font-size: 14px;
        line-height: 30px;
        text-align: center; 
        display:block;
      }

      .name{
        color: #fff;
        font-size: 18px;
        line-height: 25px;
        overflow: hidden;
        
        b{
         color: rgba(255, 255, 255, .4);
         font-size: 14px;
         padding-right: 5px;
        }
      }
      
      .time{
        color: #5d62a7;
        font-size: 14px;
        line-height: 25px;
        margin-top: 7px;
      }
      
      .status{
        color: #ffc21b;
        font-size: 14px;
        line-height: 25px;
        margin-top: 7px;
        float:right; 
        text-align: right;

        &.success{
          color: #1cd4b6;
        }
      }
    }
  }
</style>